<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<style>
			html,body {
				background-color: #efeff4;
			}
		</style>
		<script>
			mui.init();
		</script>
	</head>

	<body>

<style>
	.mui-slider-indicator {
		bottom: 0;
	}
	.mui-slider {
		background-color: #f2f2f2;
	}
</style>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">左右拖动分页9宫</h1>
</header>
<div class="mui-content">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			循环
			<div id="Gallery_Toggle" class="mui-switch">
				<div class="mui-switch-handle"></div>
			</div>
		</li>
	</ul>
	<div id="Gallery" class="mui-slider" style="margin-top:15px;">
		<div class="mui-slider-group">
			<div class="mui-slider-item">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-home"></span>
							<div class="mui-media-body">Home</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
							<div class="mui-media-body">Email</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-chatbubble"></span>
							<div class="mui-media-body">Chat</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-location"></span>
							<div class="mui-media-body">location</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-search"></span>
							<div class="mui-media-body">Search</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-phone"></span>
							<div class="mui-media-body">Phone</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-gear"></span>
							<div class="mui-media-body">Setting</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-info"></span>
							<div class="mui-media-body">about</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-more"></span>
							<div class="mui-media-body">more</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="mui-slider-item">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-home"></span>
							<div class="mui-media-body">Home</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
							<div class="mui-media-body">Email</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-chatbubble"></span>
							<div class="mui-media-body">Chat</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-location"></span>
							<div class="mui-media-body">location</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-search"></span>
							<div class="mui-media-body">Search</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-phone"></span>
							<div class="mui-media-body">Phone</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-gear"></span>
							<div class="mui-media-body">Setting</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-info"></span>
							<div class="mui-media-body">about</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-more"></span>
							<div class="mui-media-body">more</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="mui-slider-item">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-home"></span>
							<div class="mui-media-body">Home</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
							<div class="mui-media-body">Email</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-chatbubble"></span>
							<div class="mui-media-body">Chat</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-location"></span>
							<div class="mui-media-body">location</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-search"></span>
							<div class="mui-media-body">Search</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-phone"></span>
							<div class="mui-media-body">Phone</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-gear"></span>
							<div class="mui-media-body">Setting</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-info"></span>
							<div class="mui-media-body">about</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
						<a href="#">
							<span class="mui-icon mui-icon-more"></span>
							<div class="mui-media-body">more</div>
						</a>
					</li>
				</ul>
			</div>

		</div>
		<div class="mui-slider-indicator">
			<div class="mui-indicator mui-active"></div>
			<div class="mui-indicator"></div>
			<div class="mui-indicator"></div>
		</div>
	</div>
</div>
<script>
	mui.init({
		swipeBack: false,
	});
	mui.ready(function() {
		var slider = document.getElementById('Gallery');
		var group = slider.querySelector('.mui-slider-group');
		var items = mui('.mui-slider-item', group);
		var first = items[0].cloneNode(true);
		first.classList.add('mui-slider-item-duplicate');
		var last = items[items.length - 1].cloneNode(true);
		last.classList.add('mui-slider-item-duplicate');

		function toggleLoop(toggle) {
			if (toggle) {
				group.classList.add('mui-slider-loop');
				group.insertBefore(last, group.firstChild);
				group.appendChild(first);
			} else {
				group.classList.remove('mui-slider-loop');
				group.removeChild(first);
				group.removeChild(last);
			}
		}


		document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {
			var detail = e.detail;
			toggleLoop(detail.isActive);
		});
	});
</script>
</body>
</html>